<!-- <template>
  <Card>
    <div class="flexCSB">
      <div>
        <Radio-group
          v-model="status"
          @on-change="changeStatus"
          type="button"
          size="large"
        >
        <Radio label="">全部</Radio>
          <Radio label="1">待支付</Radio>
          <Radio label="2">已支付</Radio>
          <Radio label="3">交易关闭</Radio>
        </Radio-group>
      </div>
    </div>
    <Table
      class="table"
      :loading="loading1"
      highlight-row
      :columns="columns"
      :data="tableData"
    ></Table>
    <Page
      show-total
      class="page"
      :total="total"
      :current.sync="pageNum"
      :page-size="pageSize"
      show-elevator
      @on-change="changePage"
    />
  </Card>
</template> -->

<script>
export default {
  data () {
    return {
      columns: [
        { title: 'openid', key: 'openid', align: 'center' },

        { title: '订单编号', key: 'orderNum', align: 'center' },
        {
          title: '卡片名称',
          key: 'cardName',
          align: 'center'
        },
        {
          title: '价格',
          key: 'amount',
          align: 'center'
        },
        { title: '手机号', key: 'phone', align: 'center' },
        {
          title: '订单创建时间',
          key: 'gmtCreate',
          align: 'center'
        },
        {
          title: '状态',
          align: 'center',
          render: (h, params) => {
            let color = ''
            let content = ''
            if (params.row.status == 1) {
              color = 'yellow'
              content = '待支付'
            }
            if (params.row.status == 2) {
              color = 'green'
              content = '已支付'
            }
            if (params.row.status == 3) {
              color = 'red'
              content = '交易关闭'
            }
            return h(
              'Tag',
              {
                props: { color: color }
              },
              content
            )
          }
        }
      ],
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      status: '',
      loading1: false
    }
  },
  created () {
    this.getData()
  },
  mounted () {},
  methods: {
    // 获取数据
    getData () {
      this.loading1 = true
      this.$http(
        '/ztmuseum/stage/membership-order/getMembershipOrderList',
        {
          current: this.pageNum,
          size: this.pageSize,
          status: this.status // 状态 1-待支付 2-待使用 3-已使用 4-已退款
        },
        'post',
        (res) => {
          console.log(res)
          if (res.data.code == 1000) {
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          } else {
            this.$Message.error(res.data.msg)
          }
          this.loading1 = false
        }
      )
    },
    // 分页，改变页码
    changePage (data) {
      console.log(data)
      this.pageNum = data
      this.getData()
    },
    changeStatus () {
      this.pageNum = 1
      this.getData()
    }
  }
}
</script>

<style scoped>
</style>
